{{ header }}
<div id="product-search" class="container">
    <div class="header">
        <h2>{{ heading_title }}</h2>
        <a href="{{ home }}" class="back"><i class="iconfont icon-flow"></i></a>
    </div>
    <div class="content">
        <div id="content">{{ content_top }}
            {#<h1>{{ heading_title }}:結果</h1>#}
            <div class="row" style="display:none;">
                <div class="col-sm-4">
                    <input type="text" name="search" value="{{ search }}" placeholder="{{ text_keyword }}"
                           id="input-search" class="form-control"/>
                </div>
                <div class="col-sm-3">
                    <select name="category_id" class="form-control">
                        <option value="0">{{ text_category }}</option>
                        {% for category_1 in categories %}
                            {% if category_1.category_id == category_id %}
                                <option value="{{ category_1.category_id }}"
                                        selected="selected">{{ category_1.name }}</option>
                            {% else %}
                                <option value="{{ category_1.category_id }}">{{ category_1.name }}</option>
                            {% endif %}
                            {% for category_2 in category_1.children %}
                                {% if category_2.category_id == category_id %}
                                    <option value="{{ category_2.category_id }}" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_2.name }}</option>
                                {% else %}
                                    <option value="{{ category_2.category_id }}">
                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_2.name }}</option>
                                {% endif %}
                                {% for category_3 in category_2.children %}
                                    {% if category_3.category_id == category_id %}
                                        <option value="{{ category_3.category_id }}" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_3.name }}</option>
                                    {% else %}
                                        <option value="{{ category_3.category_id }}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_3.name }}</option>
                                    {% endif %}
                                {% endfor %}
                            {% endfor %}
                        {% endfor %}
                    </select>
                </div>
                <div class="col-sm-3">
                    <label class="checkbox-inline">
                        {% if sub_category %}
                            <input type="checkbox" name="sub_category" value="1" checked="checked"/>
                        {% else %}
                            <input type="checkbox" name="sub_category" value="1"/>
                        {% endif %}
                        {{ text_sub_category }}</label>
                </div>
            </div>
            <div class="searchIn">
                <label class="checkbox-inline">
                    {% if description %}
                        <input type="checkbox" name="description" value="1" id="description" checked="checked"/>
                    {% else %}
                        <input type="checkbox" name="description" value="1" id="description"/>
                    {% endif %}
                    {{ entry_description }}
                </label>
                <input type="button" value="{{ button_search }}" id="button-search"/>
            </div>

            {#<h2>{{ text_search }}</h2>#}
            {% if products %}
                <div class="sort">
                    <div>
                        <label class="input-group-addon" for="input-sort">{{ text_sort }}</label>
                        <select id="input-sort" class="form-control select-sort" onchange="location = this.value;">
                            {% for sorts in sorts %}
                                {% if sorts.value == '%s-%s'|format(sort, order) %}
                                    <option value="{{ sorts.href }}" selected="selected">{{ sorts.text }}</option>
                                {% else %}
                                    <option value="{{ sorts.href }}">{{ sorts.text }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label class="input-group-addon" for="input-limit">{{ text_limit }}</label>
                        <select id="input-limit" class="form-control select-limits" onchange="location = this.value;">
                            {% for limits in limits %}
                                {% if limits.value == limit %}
                                    <option value="{{ limits.href }}" selected="selected">{{ limits.text }}</option>
                                {% else %}
                                    <option value="{{ limits.href }}">{{ limits.text }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="product-content">
                    {% for product in products %}
                        <div class="product-layout">
                            <div class="product-thumb transition">
                                <div class="image">
                                    <div class="discount">
                                        <span class="discount-num">{{ '9.5' }}</span>
                                        <span class="discount-text">折</span>
                                    </div>
                                    <a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}"
                                                                      title="{{ product.name }}"
                                                                      class="img-responsive"/></a>
                                </div>
                                <div class="caption">
                                    <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
                                    {% if product.price %}
                                        <p class="price">
                                            {% if not product.special %}
                                                {{ product.price }}
                                            {% else %}
                                                <span class="price-old">{{ product.price }}</span>
                                                <span class="price-new">{{ product.special }}</span>
                                            {% endif %}
                                        </p>
                                    {% endif %}
                                    <div class="like">
                                        <div class="fb-like" data-href="{{ product.href }}" data-width="500"
                                             data-layout="button_count" data-action="like" data-size="small"
                                             data-show-faces="false" data-share="false"></div>
                                        <div>
                                            {% if product.rating %}
                                                <div class="rating stars">
                                                    {% for i in 1..5 %}
                                                        {% if product.rating < i %}
                                                            <span class="star fa fa-stack">
                                                <i class="star fa fa-star-o fa-stack-2x"></i>
                                            </span>
                                                        {% else %}
                                                            <span class="star fa fa-stack">
                                                <i class="star fa fa-star fa-stack-2x"></i>
                                                <i class="star fa fa-star-o fa-stack-2x"></i></span>
                                                        {% endif %}
                                                    {% endfor %}
                                                </div>
                                            {% endif %}
                                            {% if product.reviews %}
                                                ({{ product.reviews }})
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                <div class="row">
                    <div class="text-left">{{ pagination }}</div>
                    <div class="text-right">{{ results }}</div>
                </div>
            {% else %}
                <p>{{ text_empty }}</p>
            {% endif %}
            {{ content_bottom }}
        </div>
    </div>
</div>
<script type="text/javascript"><!--
    $('#button-search').bind('click', function () {
        url = 'index.php?route=product/search';

        var search = $('#content input[name=\'search\']').prop('value');

        if (search) {
            url += '&search=' + encodeURIComponent(search);
        }

        var category_id = $('#content select[name=\'category_id\']').prop('value');

        if (category_id > 0) {
            url += '&category_id=' + encodeURIComponent(category_id);
        }

        var sub_category = $('#content input[name=\'sub_category\']:checked').prop('value');

        if (sub_category) {
            url += '&sub_category=true';
        }

        var filter_description = $('#content input[name=\'description\']:checked').prop('value');

        if (filter_description) {
            url += '&description=true';
        }

        location = url;
    });

    $('#content input[name=\'search\']').bind('keydown', function (e) {
        if (e.keyCode == 13) {
            $('#button-search').trigger('click');
        }
    });

    $('select[name=\'category_id\']').on('change', function () {
        if (this.value == '0') {
            $('input[name=\'sub_category\']').prop('disabled', true);
        } else {
            $('input[name=\'sub_category\']').prop('disabled', false);
        }
    });

    $('select[name=\'category_id\']').trigger('change');
    --></script>
{#{{ footer }}#}